 import { useState, useEffect } from "react"

function Header() {
  const [count, setCount] = useState(0)

  // useEffect(() => {})  // 这样写，相当于类组件的componentDidMount componentDidUpdate， 就是挂载和更新两个钩子
  useEffect(() => {
    // 在这里面只做一些自执行一次的操作
    window.addEventListener('resize', () => {
      console.log('组件创建的时候，初始绑定一个事件');
    })
  }, []) // 如果依赖项只写一个空数组，就表示这个副作用，只在组件挂载的时候执行一遍

  useEffect(() => {
    console.log(count);
    // 这种写法就是 初始挂载的时候走一次，每次count更新的时候也走一次
    // 这个副作用函数，只针对与count做一些操作
    document.title = `count修改${count}次`
  }, [count])

  useEffect(() => {
    console.log('这种写法，就是任何导致组件更新的逻辑，都会触发这个 副作用');
  })

  return (
    <>
      <h3>状态变量：{count}</h3>
      <button onClick={() => setCount(count + 1) }>修改数据count</button>
    </>
  )
}

function App() {
  return (
    <>
      <Header />
    </>
  )
}

export default App